<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="x-ua-compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1">

        <title>吐槽</title>

        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="css/common.css">

        <script src="js/jquery-3.2.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <link rel="stylesheet" type="text/css" href="css/chat.css">

        <!--导入布局js，共享header和footer-->
        <script type="text/javascript" src="js/include.js"></script>
        <!--        <script src="js/jquery-3.0.0.min.js"></script>-->


    </head>
    <body>
        <!--        1.页眉-->
        <!--引入头部-->
        <div id="header"></div>

        <!--        2.主体-->
        <!--        <div class="container"></div>-->
        <script type="text/javascript">
            initModel()
        </script>
        <!--  -->
        <canvas id="dot"></canvas>
        <div class="wrap" id="wrap">
            <div class="header">
                <span>吐槽</span> <a href="javascript:close()" id="close_btn"></a>
            </div>
            <div class="main">
                <!-- left -->

                <!-- right -->
                <div class="right">
                    <div class="time">
                        <i class="time_bg"
                           style="background: url(img/clock.png) no-repeat;"></i> <span>吐槽记录</span>
                    </div>
                    <!-- 聊天记录 -->
                    <div class="right_record" id="outputMessage"></div>
                </div>
            </div>

            <!-- content tool/txt -->
            <div class="content">
                <div class="content_tool">
                    <div class="tool_font">
                        <i class="bg" style="background: url(img/font.png) no-repeat;"></i>
                    </div>
                    <div class="tool_emjo">
                        <i class="bg" style="background: url(img/emjo.png) no-repeat;"></i>
                    </div>

                </div>
                <div class="content_text" contenteditable="true" id="inputMessage">
                </div>

                <div class="content_btn">
                    <div class="content_btn_text">
                        <i>按enter发送信息</i>
                    </div>

                    <div class="btns">
                        <div class="send btn_item" onclick="getMessage();">
                            <span>发送</span><span>(S)</span>
                        </div>

                    </div>
                </div>

            </div>
        </div>
        <div class="wrap" id="wrap2" style="display: none;">
            <div class="header">
                <span>吐槽</span>
            </div>
            <div class="main content">
                <div class="send btn_item"
                     onclick="javascript:window.location.reload() ;"
                     style="margin: 0px auto; width: 150px; height: 42px; line-height: 41px; margin-top: 50px;">
                    <span style="width: 80px;">进来吐槽</span>
                </div>
            </div>
        </div>


        <script>
            // var username;

            //1.获取连接 new websocket()
            //服务端地址和请求类型

            var wsUrl;
            if (window.location.protocol == 'http:') {
                wsUrl = 'ws://' + window.location.host + '/demo/websocket';
            } else {
                wsUrl = 'wss://' + window.location.host + '/demo/websocket';
            }
            var ws = null;
            if ('WebSocket' in window) {
                ws = new WebSocket(wsUrl);
                console.log('websocket连接成功!!!');
            } else {
                alert('你的浏览器不支持websocket');
            }


            //客户端与服务端建立连接，建立连接后会发出一个ws.onopen事件
            //连接成功后，提示浏览器客户端输入昵称
            //连接成功后，提示浏览器客户端输入昵称


            // $.get("user/findOne", {}, function (data) {
            //     if (data == null) {
            //         alert("您尚未登录！")
            //         window.location.href = "login.html";
            //     }else if(data!=null){
            //         // username = data.realname;
            //     }
            // });

            ws.onopen = function() {
                var userName = prompt("请给自己取个名字：");
                ws.send(userName);
            }

            //客户端收到服务器端发送的信息
            ws.onmessage = function (message) {

                //message.data
                //获取以后在客户端显示
                outputMessage.innerHTML += message.data;

                var msg = document.getElementById("outputMessage");
                //差值溢出的高度减掉可视的高度
                var distance = msg.scrollHeight - msg.offsetHeight;
                msg.scrollTop = distance;
            }

            //获取某个用户输入的聊天内容，并发送服务端，让服务端广播给所有人
            function getMessage() {
                var inputMessage = document.getElementById("inputMessage").innerText;

                //获取消息，发送给服务端广播给所有的用户
                ws.send(inputMessage);
                document.getElementById("inputMessage").innerText = "";

            }

            //当关闭页面或者用户退出时候，会执行一个ws.close() 方法
            window.onbeforeunload = function () {
                ws.close();

            }

            document.onkeyup = function (e) {
                if (e.keyCode == 13) {
                    getMessage();
                }
            }
        </script>


        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <!--        3.页脚-->
        <!--导入底部-->
        <div id="footer"></div>

    </body>
</html>